<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>预约挂号平台-我的预约</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
        }

        .el-header {
            padding: 20px 10%;

        }

        .el-header > img {
            float: left
        }
        .el-footer{
            width: 100%;
            background: url(imgs/footer_bg.png);
            margin-top: 85px;
            color: #fff;
        }
        .header-title {
            float: left;
            line-height: 65px;
            color: #ff82ae;
            font-size: 30px;
            font-weight: bolder
        }

        #b1 {
            font-size: 16px;
            color: black;
        }

        #b1:hover {
            color: #ff82ae;
        }
        .el-menu--horizontal>.el-menu-item{
            border:0;
        }
        .el-menu--horizontal > .el-menu-item.is-active {
            border: 0;
        }
        /*以上为常规头脚style*/
        .el-table th.el-table__cell.is-leaf{
            border-bottom: 4px solid #e9739b;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: fit-content"><img src="imgs/logo.png" alt="" width="358px" height="65px">
            <div class="header-title">丨预约挂号平台</div>
            <div style="float: right;margin:20px 10%">
                <el-button size="medium" @click="index()"
                           style="background-color: #ff82ae;color: #fff;margin-right: 30px;">返回首页
                </el-button>
                <span v-if="hasLogin" >
                    <span v-html="'您好！'+user.username"></span>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="exit" type="text" id="b1">退出</el-button>
                </span>
                <span v-else>
                    请先 <a href="/login.html">登录</a>
                </span>
            </div>
        </el-header>
        <el-main style="padding: 0;overflow:hidden;">
            <el-menu
                    :default-active="activeIndex"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#ff82ae"
                    text-color="#fff"
                    active-text-color="#fff"
                    style="padding-left: 10%;border-bottom:none">
                <el-menu-item index="1">预约挂号</el-menu-item>
                <el-menu-item index="2">我的预约</el-menu-item>
                <el-menu-item index="3">报告查询</el-menu-item>
            </el-menu>
            <img src="imgs/appoint_bg.png" width="100%">
            <div style="height:80px">
                <div style="float: right;margin:20px 5%">
                    <span>按状态筛选：  </span>
                    <template>
                        <el-select v-model="value" placeholder="全部" style="width: 150px;" >
                            <el-option
                                    :key="'全部'"
                                    :label="'全部'"
                                    :value="'全部'"
                                    @change="selectByStatus">
                            </el-option>
                            <el-option
                                    v-for="item in options"
                                    :key="item.regStatus"
                                    :label="item.regStatus"
                                    :value="item.regStatus"
                                    @change="selectByStatus">
                            </el-option>
                        </el-select>
                    </template>
                </div>

            </div>
            <div>
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 90%;margin:0 5%"
                            empty-text="目前没有预约记录">
                        <el-table-column
                        type="index"
                        label="序号"
                        width="180">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="预约时间"
                               show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="department"
                                label="预约科室"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="doctor"
                                label="预约医生"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="patient"
                                label="就诊人"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="state"
                                label="状态"
                                width="180">
                        </el-table-column>
                        <el-table-column label="操作" width="100px">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </el-main>
        <el-footer style="padding: 0;height: 310px">
            <div style="margin:30px 15%;">
                <el-row>
                    <el-col span="12" style="text-align: left;line-height: 25px;">
                        <p>传真：xxx-xxxxxxxx</p>
                        <p>邮箱：xxxxx@xxx.com</p>
                        <p>邮编：xxxxxxx</p>
                        <p>地址：xxxxxxxxxxxxxx</p>
                    </el-col>
                    <el-col span="12">
                        <el-row style="overflow: unset">
                            <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院微官网</el-col>
                            <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院订阅号</el-col>
                            <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院服务号</el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <h5 style="text-align: center;font-weight: normal">备案号：陕ICP备19005307号 Copyright © 西安国际医学中心 版权所有</h5>
            </div>

        </el-footer>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                hasLogin:false,
                activeIndex: '1',
                user: {
                    username: "用户名", age: ""
                },
                arr: [{}],
                options: [],
                value: '',
                tableData: []
            }
        },
        methods: {
            exit() {
                axios.post("/user/logout").then(function () {
                    user={};
                    location.reload();
                })
            },
            index() {
                location.href = "/index.html"
            },
            handleSelect(key, keyPath) {
                switch (parseInt(key)) {
                    case 1 :
                        v.$message("跳转预约挂号页");
                        break;
                    /*case 2 :location.href="/appointList.html";
                    break;*/
                    case 3 :
                        location.href = "/reportList.html";
                        break;
                    default:
                        console.log(key);
                }
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                if(!confirm("确定取消"+row.date+"的预约？"))return;
                axios.post("/appoint/deleteById?id="+row.id).then(function () {
                    v.tableData.splice(index,1);
                    alert(row.date+"的预约已取消");
                })

            },
            selectByStatus(){
                if(v.value=="全部"){
                    axios.get("/appoint/selectByUserId").then(function (response) {
                        v.tableData=response.data;
                    })
                }else{
                    axios.get("/appoint/selectByStatus?regStatus="+v.value).then(function (response) {
                        v.tableData=response.data;
                    })
                }
            }

        },
        created:function (){
            axios.get("/currentUser").then(function (response) {
                if(response.data!=""){
                    v.user=response.data;
                    v.hasLogin=true;
                }
            });
            axios.get("/appoint/selectByUserId?").then(function (response) {
                v.tableData=response.data;
            });
            axios.get("/appoint/status").then(function (response)
            {
                v.options=response.data;
            })
        }
    })
</script>
</html>